<template>
  <div class="login-container">
    <div class="wrapper">
      <el-form ref="loginForm" :model="loginForm" class="login-form" v-show="!isRegister">
        <div class="title-container">
          <h3 class="title">登录</h3>
        </div>
        <el-form-item>
          <el-input ref="uid" placeholder="账号" v-model="loginForm.uid" name="uid" type="text" tabindex="1" auto-complete="on" />
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input :key="passwordType" ref="password" v-model="loginForm.password" placeholder="密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" type="password" show-password/>
        </el-form-item>
        <el-form-item>
          <span style="float: right;"><a href="#" @click="isRegister=true">还没有账号，点击注册</a></span>
        </el-form-item>
        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
      </el-form>

      <!-- 注册表单 -->
      <el-form class="login-form" :model="registerForm" v-show="isRegister">
        <div class="title-container">
          <h3 class="title">欢迎注册</h3>
        </div>
        <el-form-item>
          <el-input ref="username" v-model="registerForm.username" placeholder="用户名" name="username" type="text" tabindex="1" auto-complete="on" />
        </el-form-item>
        <el-form-item prop="password">
          <span class="svg-container">
            <svg-icon icon-class="password" />
          </span>
          <el-input :key="passwordType" v-model="registerForm.password"  type="password" show-password ref="password" placeholder="密码" name="password" tabindex="2" auto-complete="on" />
        </el-form-item>
        <el-form-item>
          <el-input ref="phone" v-model="registerForm.phone" placeholder="手机号" name="phone" type="text" tabindex="1" auto-complete="on" />
        </el-form-item>
        <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click="handleRegister">注册</el-button>
      </el-form>
    </div>

  </div>
</template>
 
<script>
import { register } from '@/api/user'
import { mapGetters } from 'vuex' 
// import { register } from '@/api/user'

export default {
  name: 'Login',
  computed: {
        ...mapGetters([
            'userinfo'
        ])
    },
  data() {
    return {
      isRegister: false,
      loginForm: {
        uid: '10000000001',
        password: '123456'
      },
      registerForm: {},
      loading: false,
      passwordType: 'password',
      redirect: undefined
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    handleLogin() {
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
        this.$store.dispatch('user/getInfo')
      }).catch(() => {
        this.loading = false
      })
    },
    handleRegister() {
      this.loading = true
      console.log('注册：',this.registerForm)
      register(this.registerForm).then(res => {
          if (res.code === 200) {
            this.$message.success('注册成功')
            this.loading = false
            this.isRegister = false
            this.registerForm = {}
          } else {
            // this.$message.error('注册失败')
            this.loading = false
          }
      })


    }
  }
}
</script>
 
<style lang="less" scoped>
.login-container {
  height: 750px;
  width: 100%;
  background-color: #283443;
  background-image: url('@/assets/images/banner1.jpeg');
  background-size: cover;

  .wrapper {
    // width: 1000px;
    // margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;

    .el-form {
      margin: 200px;
      width: 450px;
      // max-width: 100%;
      padding: 35px 35px 0;
      // margin: 0 auto;
      overflow: hidden;
      background-color: rgb(255, 255, 255);
      border-radius: 8px;

      a {
        text-decoration: none;
        color: #c3892c;
      }

      .title-container {
        position: relative;

        .title {
          font-size: 26px;
          color: #e29d2f;
          margin: 0px auto 40px auto;
          text-align: center;
          font-weight: bold;
        }
      }

      /deep/ .el-input__inner {
        height: 46px;
        border-color: #ffd04b;
      }

      .el-button--primary {
        background-color: #e29d2f;
        border-color: #c3892c;
      }
    }
  }


}
</style>